<template>
	<div :class="[setClass(styleMode), scroll?'ex h':'', full?'wh':'', type==='line' ? 'bcf fv':'']" style='border-radius: 5px 5px 0 0;'>
		<a-tabs v-model:activeKey='modelValue' :type='type' :size='size' :hideAdd='hideAdd' @change='onChange' @prevClick='onPrev' @edit='onClose'>
		    <a-tab-pane :key='v[idStr]' :tab='v[nameStr]' v-for='(v,i) of data' :closable='i!==0'></a-tab-pane>
			<template #tabBarExtraContent v-if='config.headerControls'>
			    <Controls :config='config.headerControls' :loading='loading' :dir='1'/>
			</template>
		</a-tabs>
		<div class='ex rel' :class='contentClass'>
			<template v-if='scroll'>
				<div class='abs_full oys scrollbar' :class='scrollClass'><slot :value='modelValue'></slot></div>
			</template>
			<template v-else>
				<slot :value='modelValue'></slot>
			</template>
		</div>
		<footer class='fxmc p10 tbor1' v-if='config.footerControls'>
		    <Controls :config='config.footerControls' :loading='loading' :dir='1' size='middle'/>
		</footer>
	</div>
</template>

<script>
	import { ref, watch } from 'vue'
	import { Tabs } from 'ant-design-vue'
	app.use(Tabs)
	/* --------------------------- Component --------------------------- */
	const Controls 	= $.lazy(()=>import('#cpt/temp/Controls.vue'))
	
	export default{
		components:{ Controls },
		props:{
			config 		: { type:Object, default: { }},
			data 		: { type:Array, default:({ config }) => config?.data ?? []  },
			idStr 		: { type:String, default:({ config }) => config?.idStr ?? $config.idStr},
			nameStr 	: { type:String, default:({ config }) => config?.nameStr ?? $config.nameStr },
			value 		: { type:String, default:({ config }) => config?.value ?? '0' },
			size 		: { type:String, default:({ config }) => config?.size ?? 'small' },
			type 		: { type:String, default:({ config }) => config?.type ?? 'line' },
			hideAdd 	: { type:Boolean, default:({ type, config }) => config?.hideAdd || type === 'editable-card'},
			styleMode 	:  { type:Number, default:({ config }) => config?.styleMode },
			contentClass : { type:String, default:({ config }) => config?.contentClass },
			scrollClass : { type:String, default:({ config }) => config?.scrollClass ?? 'p10' },
			scroll 		: { type:Boolean, default:({ config }) => config?.scroll},
			full 		: { type:Boolean, default:({ config }) => config?.full},
			loading 	: { type:Boolean, default:({ config }) => config?.loading}
		},
		emits:{
			change: null,
			'update:value': null,
			init: null,
			close:null
		},
		setup(props, ctx){
			const { idStr } = props
			const modelValue = ref(props.value)
			
			ctx.expose({
				change : value => modelValue.value = value
			})
			
			watch(()=>props.value, value => modelValue.value = value)
			
			return {
				modelValue,
				onChange: value => {
					ctx.emit('update:value', value)
					const row = props.data.filter(v => v[idStr] === value)
					const param = { value, row: row?.[0] ?? {} }
					ctx.emit('change', param)
					modelValue.value = value
					props?.config?.onChange?.(param)
				},
				setClass: mode => {
					if(mode === 2){
						return 'plr10'
					}else{
						return ''
					}
				},
				onPrev: v => {
					
				},
				onNext: v => {
					
				},
				onClose: value => {
					const { data } = props
					const index = data.findIndex(v => v[idStr] === value)
					data.splice(index, 1)
					
					ctx.emit('close', { value, data })
					
					props?.config?.onClose?.(param)
				}
			}
		}
	}
</script>
<style>
	.ant-tabs-bar{margin:0!important;}
	.ant-tabs-tab{padding:0 12px!important;height:36px!important;line-height: 36px;margin:0!important;font-weight:bold;font-size:13px}
	.ant-tabs-tab-active{font-weight:bold!important;}
</style>